<template>
  <div class="dashboard-home">
    <div class="welcome-section">
      <el-card shadow="hover">
        <div class="welcome-content">
          <div class="welcome-text">
            <h2>欢迎回来，{{ userStore.user?.username }}！</h2>
            <p>今天是 {{ currentDate }}，祝您工作愉快！</p>
          </div>
          <div class="welcome-stats">
            <el-tag
              :type="userStore.user?.role === 'admin' ? 'danger' : 'primary'"
              size="large"
            >
              {{ userStore.user?.role === "admin" ? "管理员" : "普通用户" }}
            </el-tag>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 功能卡片 -->
    <div class="feature-cards">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card shadow="hover" class="feature-card" @click="goToCustomers">
            <div class="feature-content">
              <el-icon size="40" color="#409EFF"><UserFilled /></el-icon>
              <h3>客户管理</h3>
              <p>管理客户信息和资料</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="feature-card">
            <div class="feature-content">
              <el-icon size="40" color="#67C23A"><DataAnalysis /></el-icon>
              <h3>数据统计</h3>
              <p>查看系统数据统计信息</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="feature-card">
            <div class="feature-content">
              <el-icon size="40" color="#E6A23C"><Setting /></el-icon>
              <h3>系统设置</h3>
              <p>配置系统参数设置</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 用户信息卡片 -->
    <div class="user-info-section">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>用户信息</span>
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="用户名">
            {{ userStore.user?.username }}
          </el-descriptions-item>
          <el-descriptions-item label="邮箱">
            {{ userStore.user?.email }}
          </el-descriptions-item>
          <el-descriptions-item label="角色">
            <el-tag
              :type="userStore.user?.role === 'admin' ? 'danger' : 'primary'"
            >
              {{ userStore.user?.role === "admin" ? "管理员" : "普通用户" }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="最后登录">
            {{ formatDate(userStore.user?.lastLoginAt) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRouter } from "vue-router";
import { UserFilled, DataAnalysis, Setting } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores/user";

const router = useRouter();
const userStore = useUserStore();

const currentDate = computed(() => {
  return new Date().toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
  });
});

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return "未知";
  return new Date(dateString).toLocaleString("zh-CN");
};

// 跳转到客户管理
const goToCustomers = () => {
  router.push("/dashboard/customers");
};
</script>

<style lang="scss" scoped>
.dashboard-home {
  .welcome-section {
    margin-bottom: 20px;

    .welcome-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .welcome-text {
        h2 {
          margin: 0 0 8px 0;
          color: $text-primary;
          font-size: 24px;
        }

        p {
          margin: 0;
          color: $text-regular;
          font-size: 14px;
        }
      }
    }
  }

  .feature-cards {
    margin-bottom: 20px;

    .feature-card {
      cursor: pointer;
      transition: transform 0.3s;

      &:hover {
        transform: translateY(-4px);
      }

      .feature-content {
        text-align: center;
        padding: 20px;

        h3 {
          margin: 12px 0 8px 0;
          color: $text-primary;
          font-size: 16px;
        }

        p {
          margin: 0;
          color: $text-secondary;
          font-size: 12px;
        }
      }
    }
  }

  .user-info-section {
    margin-bottom: 20px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        font-weight: 600;
        color: $text-primary;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .feature-cards {
    .el-col {
      margin-bottom: 20px;
    }
  }
}
</style>
